import React, { Component, PropTypes } from 'react';
import { Form, Icon, Input, Button, Checkbox, message, Modal } from 'antd';
import Md5 from 'js-md5';
import { connect } from 'dva'
import Style from './index.less';
import Service from '../service';
import Moment from 'moment';
const FormItem = Form.Item;
var map, point;

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      videoData: {},
      searchValue: ''
    }
  }
  componentDidMount() {
    let self = this;
    const token = localStorage.getItem('token');
    let videoData = self.props.videoData;
    // console.log(videoData)
    if (videoData && videoData.id) {
      self.setState({
        videoData: videoData
      })
    } else {
      message.error('快递信息不存在，请从视频列表重新进入!', 1.5, function () {
        self.context.router.push(`/uvideolist`);
      });
      self.messageConfig();
    }

  }
  componentWillUnmount() {
    let self = this;
    self.props.urlStatus({
      url: '/usign'
    });
  }

  /* 控制提示 */
  messageConfig() {
    message.config({
      top: 100, // 消息距离顶部的位置
      duration: 2, // 默认自动关闭延时，单位秒
      maxCount: 1, // 最大显示数, 超过限制时，最早的消息会被自动关闭
    });
  }
  // 返回
  returnFun = () => {
    // this.context.router.push(`/uindex`);
    history.back(-1);
  }
  //  签收
  signFun = () => {
    const token = localStorage.getItem('token');
    let self = this;
    self.props.confirm({
      params: {
        token: token,
        id: self.state.videoData.id,
        status: 1
      },
      func: function (result) {
        Modal.success({
          title: '确认签收',
          content: '',
          onOk: function () {
            self.context.router.push(`/ucomment`);
          }
        });

      }
    })

  }
  // 拒签
  nosignFun = () => {
    this.context.router.push(`/unocomment`);
  }
  // 我的
  myUrlFun = () => {
    this.context.router.push(`/umy`);
  }
  render() {
    const { getFieldDecorator } = this.props.form;
    const { videoData } = this.state;
    return (
      <div className={Style.wrap}>
        <div className={Style.headWrap}>
          <div className={Style.navTitle}>
            <span className={Style.arrow} onClick={this.returnFun}>
              <Icon type="left" />
            </span>
            线上签收快递
            <span className={Style.arrow + ' ' + Style.arrowText} onClick={this.myUrlFun}>我的</span>
          </div>
        </div>
        <div className={Style.dataWrap}>
          <div className={Style.signWrap}>
            <div className={Style.videoWrap}>
              <video src="movie.ogg" width="320" height="240" controls="controls" src={`${Service.qiniuUrl}/` + videoData.video}>
                Your browser does not support the video tag.
          </video>
              <dl>
                <dt>快递员：{videoData.e_bike_realname}</dt>
                <dd>发送时间：{Moment(videoData.createtime * 1000).format("YYYY-MM-DD HH:mm:ss")}</dd>
              </dl>
            </div>
            <div className={Style.btn + ' ' + Style.blueBtn} onClick={this.signFun}>
              <Icon type="check-square" /> 签收
          </div>
            <div className={Style.btn} onClick={this.nosignFun}>
              拒签！
          </div>
          </div>
        </div>
      </div>
    )
  }
}

App.contextTypes = {
  router: React.PropTypes.object
}

function mapStateToProps(state, ownProps) {
  return {
    urData: state.umodel.urData,
    videoData: state.umodel.videoData
  }
}
function dispatchToProps(dispatch) {
  return {
    confirm(payload, params) {
      dispatch({
        type: 'umodel/confirm',
        payload
      })
    }, urlStatus(payload, params) {
      dispatch({
        type: 'myHome/urlStatus',
        payload
      })
    }

  }
}
export default connect(mapStateToProps, dispatchToProps)(Form.create()(App));
